<template>
  <!-- imgRecordList:{{ imgRecordList.length }}.active:{{ _active }} -->
  <div class="nav-wrap">
    <div class="nav">
      <i class="iconfont ai-icon-a-shibieleixingguanbi" @click="cancel"></i>
      <i class="iconfont ai-icon-shangyibu operate" @click="operate('undo')" :class="isCanPrev ? '' : 'grey'"></i>
      <i class="iconfont ai-icon-xiayibu operate" @click="operate('next')" :class="isCanNext ? '' : 'grey'"></i>
      <i class="iconfont ai-icon-a-shibieleixingqueren operate" :class="imgRecordList.length ? '' : 'grey'"
        @click="confirm"></i>
    </div>
  </div>
</template>

<script setup>
import Toast from "@vant/weapp/dist/toast/toast";
import { ref, defineProps, computed, watch } from "vue";
let activeDefault = -1;
let _active = ref(activeDefault);
const props = defineProps({
  imgRecordList: {
    // 图片存的记录
    type: Array,
    default: [],
  },
  active: {
    // 当前显示的是记录里的哪一条
    type: Number,
    default: -1,
  },
});
const emit = defineEmits(["operate", "removeMask", "confirm", "cancel"]);
_active.value = props.imgRecordList.length - 1;
function cancel() {
  _active.value = 0;
  // emit('operate', {
  //   type,
  //   imgPath: props.imgRecordList[0]
  // });
  emit("cancel");
}
// watch(props.imgRecordList, (newVal, oldVal) => {
//   console.log('watch-imgRecordList.length', newVal, newVal.length)
//   _active.value = newVal.length - 1;
// });
watch(props, (newVal, oldVal) => {
  // console.log('props-change', newVal);
  _active.value = newVal.imgRecordList.length - 1;
});
let isCanPrev = computed(() => {
  return _active.value > 0;
});
let isCanNext = computed(() => {
  return _active.value < props.imgRecordList.length - 1;
});
let isCanConfirm = computed(() => {
  return props.imgRecordList.length;
});
function operate(type) {
  if (type == "undo" && !isCanPrev.value) {
    return Toast.fail("没有上一步");
  } else if (type == "next" && !isCanNext.value) {
    return Toast.fail("没有下一步");
  }
  type == "undo"
    ? (_active.value = _active.value - 1)
    : (_active.value = _active.value + 1);
  console.log("switchhistory~operate~index", _active.value);
  emit("operate", {
    index: _active.value,
    type,
    imgPath: props.imgRecordList[_active.value],
  });
}

function confirm() {
  // isDownload = true;
  if (!isCanConfirm.value) {
    uni.showToast({ title: "还未选择消除", icon: "none" });
    return;
  }
  emit("confirm");
}
</script>

<style lang="less" scoped>
.operate {
  color: var(--a-two-text-color);

  &.grey {
    color: grey;
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--a-one-text-color);

  &.confirm {
    justify-content: flex-end;
  }

  .iconfont:nth-child(2),
  :nth-child(3) {
    font-size: 52rpx;
  }
}
</style>
